<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">审核详情</span>
    </template>
  </el-page-header>
  <el-card class="role-card">
    <el-descriptions
      class="margin-top"
      style="
        border-radius: 10px;
        margin: 20px 130px;
        width: 72.5%;
        box-shadow: 5px 5px 10px rgba(98, 106, 239, 0.5);
      "
      :column="3"
      size="large"
      border
    >
      <el-descriptions-item label-class-name="my-label" class-name="my-content">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle" size="large">
              <user />
            </el-icon>
            员工姓名
          </div>
        </template>
        {{ empName }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-label" class-name="my-content">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle" size="large">
              <OfficeBuilding />
            </el-icon>
            所属部门
          </div>
        </template>
        {{ deptName }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="my-label" class-name="my-content">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle" size="large">
              <Place />
            </el-icon>
            岗位
          </div>
        </template>
        {{ position }}
      </el-descriptions-item>
    </el-descriptions>
    <el-tabs
      tab-position="left"
      style="margin: 20px 0 0 0"
      class="demo-tabs fix"
    >
      <el-tab-pane label="计件考核" v-if="WaitStateList.pieceState == 1">
        <Piece
          :empId="empId"
          :update="update"
          :thirdId="thirdId"
          :positionId="positionId"
          :type="type"
          :finish="finish"
        ></Piece>
      </el-tab-pane>
      <el-tab-pane label="提成考核" v-if="WaitStateList.kpiState == 1">
        <Kpi
          :empId="empId"
          :update="update"
          :thirdId="thirdId"
          :positionId="positionId"
          :type="type"
          :finish="finish"
        ></Kpi>
      </el-tab-pane>
      <el-tab-pane
        label=""
        v-if="WaitStateList.pieceState != 1 && WaitStateList.kpiState != 1"
      >
        <el-result
          icon="success"
          title="审批完成"
          sub-title="已完成审批，谢谢您的配合"
        >
          <template #extra>
            <el-button type="primary" @click="goback">下一位</el-button>
          </template>
        </el-result>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import { ref, onBeforeMount, reactive, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { Timer } from "@element-plus/icons-vue";
import { Calendar } from "@element-plus/icons-vue";
import Piece from "./components/piece";
import Kpi from "./components/kpi";
import { getFourthTaskState } from "@/api/task";
import { getFinishState } from "@/api/resultFourth";

const route = useRoute();
let empId = route.query.empId;
let deptName = route.query.deptName;
let empName = route.query.empName;
let positionId = route.query.positionId;
let position = route.query.position;
let type = route.query.type;
let finish = route.query.finish === "true";

const WaitStateList = ref([]);
let stateUserId = route.query.empId;
let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
onBeforeMount(() => {
  if (!finish) {
    getFourthTaskState({ assessorId, stateUserId }).then((data) => {
      WaitStateList.value = data.data;
    });
  } else {
    getFinishState({ assessorId, empId, positionId }).then((data) => {
      WaitStateList.value = data.data;
    });
  }
});

const { proxy } = getCurrentInstance();
const goback = () => {
  proxy.$router.go(-1);
};

const update = (item) => {
  if (item == "piece") WaitStateList.value.pieceState = 2;
  else if (item == "kpi") WaitStateList.value.kpiState = 2;
};
</script>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

.fix {
  position: fix;
  top: 0;
  left: 0;
}

.button {
  margin-left: 205px;
  float: left;
}

.el-card {
  border-radius: 10px;
  margin: 20px;
}

:deep(.my-label) {
  background: rgba(98, 106, 239, 0.15) !important;
  color: #626aef !important;
  border: #626aef 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(98, 106, 239, 0.9) !important;
  border: #626aef 2px solid !important ;
}
</style>
